<template>
  <div class="patient-detail-container">
    <!-- 基本信息卡片 -->
    <el-card class="info-card" shadow="never">
      <template #header>
        <div class="card-header">
          <h3 class="card-title">患者基本信息</h3>
          <el-tag :type="getGenderTagType(patient.gender)" effect="plain">
            {{ patient.gender }}
          </el-tag>
        </div>
      </template>
      
      <el-descriptions :column="2" border>
        <el-descriptions-item label="姓名" label-class-name="desc-label">
          <el-tooltip effect="light" :content="patient.name" placement="top">
            <span class="text-ellipsis">{{ patient.name }}</span>
          </el-tooltip>
        </el-descriptions-item>
        
        <el-descriptions-item label="年龄" label-class-name="desc-label">
          {{ patient.age }}岁
        </el-descriptions-item>
        
        <el-descriptions-item label="电话" label-class-name="desc-label">
          <el-link type="primary" :href="`tel:${patient.phone}`">
            {{ patient.phone }}
          </el-link>
        </el-descriptions-item>
        
        <el-descriptions-item label="文化程度" label-class-name="desc-label">
          {{ patient.education || '未填写' }}
        </el-descriptions-item>
        
        <el-descriptions-item label="婚姻状况" label-class-name="desc-label">
          <el-tag :type="getMaritalTagType(patient.maritalStatus)" size="small">
            {{ patient.maritalStatus || '未填写' }}
          </el-tag>
        </el-descriptions-item>
        
        <el-descriptions-item label="身份证号" label-class-name="desc-label">
          <el-tooltip effect="light" :content="patient.idCard" placement="top">
            <span class="text-ellipsis">{{ formatIdCard(patient.idCard) }}</span>
          </el-tooltip>
        </el-descriptions-item>
        
        <el-descriptions-item label="就诊日期" label-class-name="desc-label">
          {{ formatDate(patient.visitDate) }}
        </el-descriptions-item>
        
        <el-descriptions-item label="所在地址" label-class-name="desc-label" :span="2">
          <el-tooltip effect="light" :content="patient.address" placement="top" v-if="patient.address">
            <span class="text-ellipsis">{{ patient.address }}</span>
          </el-tooltip>
          <span v-else>未填写</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 详细信息部分 -->
    <div class="detail-sections">
      <el-card class="detail-card" shadow="hover" v-if="patient.background">
        <template #header>
          <div class="section-header">
            <svg-icon icon-class="profile" class="section-icon" />
            <span>个人背景</span>
          </div>
        </template>
        <div class="section-content pre-line">{{ patient.background }}</div>
      </el-card>

      <el-card class="detail-card" shadow="hover" v-if="patient.purpose">
        <template #header>
          <div class="section-header">
            <svg-icon icon-class="purpose" class="section-icon" />
            <span>就诊目的</span>
          </div>
        </template>
        <div class="section-content pre-line">{{ patient.purpose }}</div>
      </el-card>

      <el-card class="detail-card" shadow="hover" v-if="patient.history">
        <template #header>
          <div class="section-header">
            <svg-icon icon-class="history" class="section-icon" />
            <span>病史记录</span>
          </div>
        </template>
        <div class="section-content pre-line">{{ patient.history }}</div>
      </el-card>

      <el-card class="detail-card" shadow="hover" v-if="patient.plan">
        <template #header>
          <div class="section-header">
            <svg-icon icon-class="plan" class="section-icon" />
            <span>治疗计划</span>
          </div>
        </template>
        <div class="section-content pre-line">{{ patient.plan }}</div>
      </el-card>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button type="primary" @click="handleEdit" round>
        <el-icon><Edit /></el-icon>
        编辑信息
      </el-button>
      <el-button @click="handleClose" round>
        <el-icon><Back /></el-icon>
        返回列表
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import { Edit, Back } from '@element-plus/icons-vue'

const props = defineProps({
  patient: {
    type: Object,
    required: true,
    default: () => ({})
  }
})

const emit = defineEmits(['close', 'edit'])

// 格式化身份证显示
const formatIdCard = (idCard) => {
  if (!idCard) return '未填写'
  return `${idCard.substring(0, 6)}****${idCard.substring(14)}`
}

// 格式化日期显示
const formatDate = (dateStr) => {
  if (!dateStr) return '未填写'
  return dateStr.replace(/\//g, '-') // 统一日期分隔符
}

// 获取性别标签类型
const getGenderTagType = (gender) => {
  return gender === '女' ? 'danger' : 'primary'
}

// 获取婚姻状况标签类型
const getMaritalTagType = (status) => {
  switch(status) {
    case '已婚': return 'success'
    case '未婚': return 'info'
    case '离异': return 'warning'
    default: return ''
  }
}

const handleEdit = () => {
  emit('edit', props.patient)
}

const handleClose = () => {
  emit('close')
}
</script>

<style lang="scss" scoped>
.patient-detail-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.info-card {
  margin-bottom: 24px;
  border-radius: 12px;
  
  :deep(.el-card__header) {
    padding: 16px 20px;
    background-color: #f8fafc;
    border-bottom: 1px solid #eaeef3;
  }
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.desc-label {
  width: 100px;
  font-weight: 500;
  color: #606266;
  background-color: #f9f9f9 !important;
}

.text-ellipsis {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.detail-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.detail-card {
  border-radius: 12px;
  
  :deep(.el-card__header) {
    padding: 14px 20px;
    border-bottom: 1px dashed #eaeef3;
  }
}

.section-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #409EFF;
  
  .section-icon {
    margin-right: 8px;
    font-size: 18px;
  }
}

.section-content {
  font-size: 14px;
  line-height: 1.8;
  color: #606266;
}

.pre-line {
  white-space: pre-line;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  
  .el-button {
    padding: 10px 24px;
    font-weight: 500;
    
    .el-icon {
      margin-right: 6px;
    }
  }
}

@media (max-width: 768px) {
  .info-card {
    :deep(.el-descriptions) {
      grid-template-columns: 1fr;
    }
    
    :deep(.el-descriptions-item) {
      grid-column: span 1 !important;
    }
  }
}
</style>